<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>copy one</title>
  <script type="text/javascript" src="./js/phaser.js"></script>
  <script type="text/javascript" src="./js/copy/index.js"></script>
</head>
<body>
  <div id="game"></div>
</body>
<script type="text/javascript">
FrauenVsRefugees.VOLUME = 0.3
      FrauenVsRefugees.MUSIC_VOLUME = 0.1;
      FrauenVsRefugees.GFX = true;
      FrauenVsRefugees.TOUCH = document.documentElement.className.indexOf("no-touchevents") == -1;




      //  100% of the browser window - see Boot.js for additional configuration
      //FrauenVsRefugees.SAFE_ZONE_WIDTH = Math.max(800, window.innerWidth);// * window.devicePixelRatio;
      //FrauenVsRefugees.SAFE_ZONE_HEIGHT = Math.max(550, window.innerHeight);// * window.devicePixelRatio;

      //FrauenVsRefugees.SAFE_ZONE_WIDTH = 622;// * window.devicePixelRatio;
      //FrauenVsRefugees.SAFE_ZONE_HEIGHT = 193;// * window.devicePixelRatio;

      FrauenVsRefugees.SAFE_ZONE_WIDTH = window.innerWidth;
      FrauenVsRefugees.SAFE_ZONE_HEIGHT = window.innerHeight;

      FrauenVsRefugees.VIEW_WIDTH = 622;
      FrauenVsRefugees.VIEW_HEIGHT = 193;

      FrauenVsRefugees.VIEW_CENTER_X = FrauenVsRefugees.VIEW_WIDTH / 2;
      FrauenVsRefugees.VIEW_CENTER_Y = FrauenVsRefugees.VIEW_HEIGHT / 2;
var TypeWriter = function(t, e, i) {
    this.value = e,
    this.text = t,
    this.speed = i,
    this.currentChar = 0,
    this.onComplete = new Phaser.Signal,
    this.timer = game.time.events.repeat(i, this.value.length, this.type, this)
}
;
TypeWriter.prototype.type = function() {
    return this.currentChar++,
    this.text.text = this.value.substr(0, this.currentChar),
    this.currentChar >= this.value.length ? void this.onComplete.dispatch() : void 0
}
var ParentSprite = function() {
    Phaser.Sprite.call(this, game, 0, 0)
}
;
ParentSprite.prototype = Object.create(Phaser.Sprite.prototype),
ParentSprite.prototype.constructor = ParentSprite,
ParentSprite.prototype.update = function() {
    for (var t = this.children.length; t--; )
        this.children[t].update()
}
;
FrauenVsRefugees.createViewWindow = function()
      {
        var viewWindow = new ParentSprite();
        game.add.existing(viewWindow);
        
        var s = (game.width) / FrauenVsRefugees.VIEW_WIDTH;
        var w = Math.round(FrauenVsRefugees.VIEW_WIDTH * s); //i know its the same as game.width ;)
        var h = Math.round(FrauenVsRefugees.VIEW_HEIGHT * s);
        viewWindow.scale.set(s, s);

        viewWindow.y = Math.round(game.height / 2 - (h / 2));


        FrauenVsRefugees.VIEW_WINDOW_SCALE = s;

        var mask = game.add.graphics(0, 0);
        mask.beginFill(0x000000);
        mask.drawRect(0, 0, w, h);
        mask.endFill();
        mask.x = viewWindow.x;
        mask.y = viewWindow.y;
        mask.fixedToCamera = true;
        viewWindow.mask = mask;


        var frameGraphics = game.add.graphics(0, 0);    
        frameGraphics.lineStyle(2, 0xffffff, 1);


        
        //frameGraphics.drawRect(0, 0, FrauenVsRefugees.VIEW_WIDTH, FrauenVsRefugees.VIEW_HEIGHT);
        frameGraphics.moveTo(0,0);
        frameGraphics.lineTo(w, 0);
        frameGraphics.moveTo(0, h - 1);
        frameGraphics.lineTo(w, h - 1);
        frameGraphics.fixedToCamera = true;
        frameGraphics.cameraOffset.x = viewWindow.x;
        frameGraphics.cameraOffset.y = viewWindow.y;

        viewWindow.filterArea = new Phaser.Rectangle(mask.x, mask.y, w, h);

        return viewWindow;
      }
  var game = new Phaser.Game(800, 600, Phaser.CANVAS, "game");

  game.state.add('Boot', FrauenVsRefugees.Boot);
  game.state.add('Preload', FrauenVsRefugees.Preload );
  game.state.add('Intro', FrauenVsRefugees.Intro);
  game.state.start('Boot');


</script>
</html>